<template>
	<a-card :bordered="false">

		<!-- 查询区域 -->
		<div class="table-page-search-wrapper">
			<a-form layout="inline" @keyup.enter.native="searchQuery">
				<a-row :gutter="24">
					<template>
            <a-col :md="6" :sm="8">
              <a-form-item label="用户账号">
                <a-input placeholder="请输入用户账号查询" v-model="queryParam.loginName"></a-input>
              </a-form-item>
            </a-col>

						<a-col :md="6" :sm="8">
							<a-form-item label="用户姓名">
								<a-input placeholder="请输入用户姓名查询" v-model="queryParam.realName"></a-input>
							</a-form-item>
						</a-col>

						<a-col :md="6" :sm="8">
							<a-form-item label="手机号码">
								<a-input placeholder="请输入手机号码查询" v-model="queryParam.mobile"></a-input>
							</a-form-item>
						</a-col>
<!--						<a-col :md="4" :sm="8">-->
<!--							<a-form-item label="用户类型:">-->
<!--								<a-select placeholder="请选择用户类型" showSearch showArrow optionFilterProp="children"-->
<!--									:getPopupContainer="(node) => node.parentNode" :defaultActiveFirstOption="false" v-model="queryParam.userType">-->
<!--									<a-select-option v-for="userItem in userTypeList" :key="userItem.rescueId"-->
<!--										:value="userItem.userType">{{userItem.userName}}</a-select-option>-->
<!--								</a-select>-->
<!--							</a-form-item>-->
<!--						</a-col>-->
					</template>

					<a-col :md="6" :sm="8">
						<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
							<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
							<a-button type="primary" @click="resetParam" icon="reload" style="margin-left: 8px">重置
							</a-button>
						</span>
					</a-col>

				</a-row>
			</a-form>
		</div>

		<!-- 操作按钮区域 -->
		<div class="table-operator" style="border-top: 5px">
			<a-button @click="handleAdd" type="primary" icon="plus">添加用户</a-button>
			<a-dropdown v-if="selectedRowKeys.length > 0">
				<a-menu slot="overlay" @click="handleMenuClick">
					<a-menu-item key="1">
						<a-icon type="delete" @click="batchDel" />
						删除
					</a-menu-item>
				</a-menu>
				<a-button style="margin-left: 8px">
					批量操作
					<a-icon type="down" />
				</a-button>
			</a-dropdown>
		</div>

		<!-- table区域-begin -->
		<div>
			<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
				<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a
					style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
				<a style="margin-left: 24px" @click="onClearSelected">清空</a>
			</div>

			<a-table ref="table" bordered size="middle" rowKey="userId" :columns="columns" :dataSource="dataSource"
				:pagination="ipagination" :loading="loading"
				:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
				@change="handleTableChange">

				<template slot="avatarslot" slot-scope="text, record">
					<div class="anty-img-wrap">
						<a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user" />
					</div>
				</template>

				<span slot="action" slot-scope="text, record">
					<a @click="handleEdit(record)" :disabled="!(record.userType == 1 || record.userType == 4)">编辑</a>
					<!-- <a @click="handleEdit(record)">编辑</a> -->

					<a-divider type="vertical" />
          <a href="javascript:;" @click="handleDetail(record)">详情</a>
					<a-divider type="vertical" />
          <a href="javascript:;" @click="handleChangePassword(record)">密码</a>
					<a-divider type="vertical" />
          <a href="javascript:;" @click="loginConfig(record)">登录配置</a>
					<a-divider type="vertical" />
          <a-popconfirm :title="showUserEnableMsg(record, 1)" @confirm="() => changeStatus(record)">
            <a>{{showUserEnableMsg(record)}}</a>
          </a-popconfirm>
					<a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.userId)">
            <a>删除</a>
          </a-popconfirm>
				</span>


			</a-table>
		</div>
		<!-- table区域-end -->

		<user-modal ref="modalForm" @ok="modalFormOk"></user-modal>

		<password-modal ref="passwordmodal" @ok="passwordModalOk"></password-modal>

    <user-login-config-modal ref="loginConfigModal" ></user-login-config-modal>


	</a-card>
</template>	

<script>
	import UserModal from './modules/UserModal'
	import PasswordModal from './modules/PasswordModal'
	import { getFileAccessHttpUrl } from '@/api/manage';
	import { JeecgListMixin } from '@/mixins/JeecgListMixin'
	import { changeUserStatus } from '@/api/api'
	import JInput from '@/components/jeecg/JInput'
	import UserRecycleBinModal from './modules/UserRecycleBinModal'
  import UserLoginConfigModal from "./modules/UserLoginConfigModal";

	export default {
		name: "UserList",
		mixins: [JeecgListMixin],
		components: {
			UserModal,
			PasswordModal,
			JInput,
			UserRecycleBinModal,
      UserLoginConfigModal
		},
		data() {
			return {
				description: '这是用户管理页面',
				queryParam: {
					mobile: "",
					realName: "",
					userType: undefined
				},
				userTypeList: [{
						userName: "web端",
						userType: 1
					},
					{
						userName: "长者端",
						userType: 2
					},
					{
						userName: "家政端",
						userType: 3
					},
					{
						userName: "健康管理师",
						userType: 4
					}
				],
				recycleBinVisible: false,
				columns: [
					/*{
					  title: '#',
					  dataIndex: '',
					  key:'rowIndex',
					  width:60,
					  align:"center",
					  customRender:function (t,r,index) {
					    return parseInt(index)+1;
					  }
					},*/
					{
						title: '用户账号',
						align: "center",
						dataIndex: 'loginName',
						width: 120
					},
					{
						title: '用户姓名',
						align: "center",
						width: 100,
						dataIndex: 'realName',
					},
					// {
					// 	title: '昵称',
					// 	align: "center",
					// 	width: 100,
					// 	dataIndex: 'nickName',
					// },
					{
						title: '性别',
						align: "center",
						width: 80,
						dataIndex: 'sex',
						customRender: function(text) {
							if (text == 1) {
								return "男"
							} else if (text == 2) {
								return "女"
							}
						}
					},
					// {
					// 	title: '出生日期',
					// 	align: "center",
					// 	width: 100,
					// 	dataIndex: 'birthday'
					// },
					{
						title: '手机号码',
						align: "center",
						width: 100,
						dataIndex: 'mobile'
					},
					// {
					// 	title: '用户类型',
					// 	align: "center",
					// 	width: 100,
					// 	dataIndex: 'userType',
					// 	customRender: function(text) {
					// 		if (text == 1) {
					// 			return "web端"
					// 		} else if (text == 2) {
					// 			return "长者端"
					// 		} else if (text == 3) {
					// 			return "家政端"
					// 		} else if (text == 4) {
					// 			return "健康管理师"
					// 		}
					// 	}
					// },
					{
						title: '用户状态',
						align: "center",
						width: 100,
						dataIndex: 'status',
						customRender: function(text) {
							if (text == 1) {
								return "启用"
							} else if (text == 0) {
								return "停用"
							}
						}
					},
					{
						title: '操作',
						dataIndex: 'action',
						scopedSlots: {
							customRender: 'action'
						},
						align: "center",
						width: 170
					}

				],
				url: {
					list: "/sys/user/page",
					delete: "/sys/user/delete",
					deleteBatch: "/sys/user/delete-batch",
					importExcelUrl: "sys/user/importExcel",
				},
			}
		},
		computed: {
			importExcelUrl: function() {
				return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
			}
		},
		methods: {
			getAvatarView: function(avatar) {
				return getFileAccessHttpUrl(avatar)
			},
      showUserEnableMsg(record, type) {
        if (type === 1) {
          return record.status === 1 ? "确定禁用吗?": "确定启用吗?";
        }
        console.log(record.status, type)
        return record.status === 1 ? "禁用": "启用";
      },
			handleMenuClick(e) {
				if (e.key == 1) {
					this.batchDel();
				}
			},
			handleChangePassword(record) {
				console.log(record.userId, record.loginName)
				this.$refs.passwordmodal.show(record.userId, record.loginName);
			},
			passwordModalOk() {
				//TODO 密码修改完成 不需要刷新页面，可以把datasource中的数据更新一下
			},
			changeStatus(record) {
				let objTemp = {}
				objTemp.status = (record.status == 0) ? 1 : 0
				objTemp.userId = record.userId
				changeUserStatus(objTemp).then(res => {
					if(res.code == '00000') {
						this.$message.success("修改成功")
						this.loadData()
					} else {
						this.$message.warning("修改失败:" + res.msg)
					}
				})
			},
			resetParam() {
				this.queryParam = {}
				this.queryParam.userType = undefined
				this.loadData(1)
			},
      loginConfig(record) {
        console.log(record)
        this.$refs.loginConfigModal.setUserID(record.userId, record.loginName)
        this.$refs.loginConfigModal.showModel(true);
      },
		}

	}
</script>
<style scoped>
	@import '~@assets/less/common.less'
</style>
